@import 'functions/color';

$colorDarken: $gray-700;
$alphaBackgroundColor: 0.1;
$btn-focus-width: 0.25rem;

@mixin button-outline-variant(
  $color,
  $color-hover: color-yiq($color, $colorDarken, $white),
  $active-background: $color,
  $active-border: $color
) {
  $border-color: rgba($color, 0.5);
  color: $color;
  border-color: $border-color;

  @include hover {
    color: $color;
    background-color: rgba($active-background, $alphaBackgroundColor);
    border-color: $border-color;
  }

  &:focus,
  &.focus {
    box-shadow: 0 0 0 $btn-focus-width rgba($color, 0.5);
  }

  &.disabled,
  &:disabled {
    color: $color;
    background-color: transparent;
  }
}

.btn-link {
  &:hover {
    text-decoration: none;
    background-color: rgba($primary, $alphaBackgroundColor);
  }
}
